<template>
	<view class="container">
		<view v-if="lists.length>0">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 上架
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + 2,true?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in lists" :key="index" v-if="item.isShow == '1'">
					<view @click="towh(item)">
						<view :class="['text-' + item.menuColor]">
							<image style="width: 36px;height: 36px;" :src="item.menuIcon"></image>
						</view>
						<text style="font-size: 36upx;">{{item.menuName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="listx.length>0">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 下架
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + 2,true?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in listx" :key="index" v-if="item.isShow == '1'">
					<view @click="towh(item)">
						<view :class="['text-' + item.menuColor]">
							<image style="width: 36px;height: 36px;" :src="item.menuIcon"></image>
						</view>
						<text style="font-size: 36upx;">{{item.menuName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="listh.length>0">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 货位
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + 2,true?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in listh" :key="index" v-if="item.isShow == '1'">
					<view @click="towh(item)">
						<view :class="['text-' + item.menuColor]">
							<image style="width: 36px;height: 36px;" :src="item.menuIcon"></image>
						</view>
						<text style="font-size: 36upx;">{{item.menuName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="listc.length>0">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 查询
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + 2,true?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in listc" :key="index" v-if="item.isShow == '1'">
					<view @click="towh(item)">
						<view :class="['text-' + item.menuColor]">
							<image style="width: 36px;height: 36px;" :src="item.menuIcon"></image>
						</view>
						<text style="font-size: 36upx;">{{item.menuName}}</text>
					</view>
				</view>
			</view>
		</view>
		
		  
		<view class="bg" v-show="show">
			<view style="width: 80%; height: 320px;background: #fff;border-radius: 10px;padding: 20px;
			display: flex;flex-direction: column;justify-content: space-between;">
				<view class="">
					<view style="font-weight: bold;">
						请选择绑定方式：
					</view>
					<view v-for="(item,index) in listArr" :key="index" @click="xuanzhe(item)"
					 style="padding: 10px;border: 1px solid #aaa; border-radius: 10px;margin: 10px 15px;"
					 :style="{background:item.check?'#00aa00':'',color:item.check?'#fff':''}">
						{{item.name}}
					</view>
					<view class="cu-form-group ">
						<view class="title" >需绑定子个数：</view>
						<input v-model ="num"  placeholder="请输入" name="input" type="number" style="border-bottom: 1px solid #aaa;text-align:center;"></input>
					</view>
				</view>
				<view style="display: flex;">
					<button @click="show=false" type="default">
						关闭
					</button>
					<button @click="confirm" type="primary">
						确定
					</button>
				</view>
				
			</view>
		</view>
		
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				num:'',
				show:false,
				listArr:[
					{
						check:true,
						name:'方式1  A-B'
					},{
						check:false,
						name:'方式2  A-C'
					},{
						check:false,
						name:'方式3  B-C'
					}
				],
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				ppList: [],
				saleDatas: [], //活动商品类型---促销商品
				sreach: '',
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'ASN入库'
				}],
				modalName: null,
				gridCol: 2,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				lists: [],
				listc: [],
				listx: [],
				listh: [],

			};
		},
		computed: {
			...mapState(['hasLogin', 'menuList', 'userInfo', 'auditlist', 'setMenuList'])
		},
		onShow() {
			this.lists = [];
			this.listc = [];
			this.listx = [];
			this.listh = [];
			if (this.menuList.length > 0) {
				this.cuIconList = this.menuList;
				for (var i = 0; i < this.cuIconList.length; i++) {
					this.cuIconList[i].menuColor = 'red';
					if (this.cuIconList[i].menuName == 'ASN到货') {
						this.cuIconList[i].menuIcon = '/static/image/asndh.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '采购上架') {
						this.cuIconList[i].menuIcon = '/static/image/cgsj.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '快速质检') {
						this.cuIconList[i].menuIcon = '/static/image/zhijian.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == 'ASN入库') {
						this.cuIconList[i].menuIcon = '/static/image/ruku.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == 'SKU查询') {
						this.cuIconList[i].menuIcon = '/static/image/SKUcx.png';
						this.listc.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '拣货') {
						this.cuIconList[i].menuIcon = '/static/image/jh.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '产成品上架') {
						this.cuIconList[i].menuIcon = '/static/image/ccpsj.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '拣货回退') {
						this.cuIconList[i].menuIcon = '/static/image/jhth.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '国内仓拣货回退') {
						this.cuIconList[i].menuIcon = '/static/image/gncjhth.png';
						this.listx.push(this.cuIconList[i]) 
					} else if (this.cuIconList[i].menuName == '国内仓拣货') {
						this.cuIconList[i].menuIcon = '/static/image/gncjh.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '其它拣货') {
						this.cuIconList[i].menuIcon = '/static/image/jh.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '其它拣货回退') {
						this.cuIconList[i].menuIcon = '/static/image/jhth.png';
						this.listx.push(this.cuIconList[i])
					}else if (this.cuIconList[i].menuName == '序列号打印') {
						this.cuIconList[i].menuIcon = '/static/image/dy.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '打包复核') {
						this.cuIconList[i].menuIcon = '/static/image/fuhe.png';
						this.listx.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '库房转移') {
						this.cuIconList[i].menuIcon = '/static/image/kfzy.png';
						this.lists.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '上架记录(到货)') {
						this.cuIconList[i].menuIcon = '/static/image/dhjl.png';
						this.listc.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '上架记录(生产)') {
						this.cuIconList[i].menuIcon = '/static/image/scjl.png';
						this.listc.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '货位存量查询') {
						this.cuIconList[i].menuIcon = '/static/image/xclcx.png';
						this.listc.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '货位调整') {
						this.cuIconList[i].menuIcon = '/static/image/hwtz.png';
						this.listh.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '货位盘点') {
						this.cuIconList[i].menuIcon = '/static/image/hwtz.png';
						this.listh.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '条码比对') {
						this.cuIconList[i].menuIcon = '/static/image/hwtz.png';
						this.listh.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '条码校对') {
						this.cuIconList[i].menuIcon = '/static/image/hwtz.png';
						this.listh.push(this.cuIconList[i])
					} else if (this.cuIconList[i].menuName == '核对包裹码') {
						this.cuIconList[i].menuIcon = '/static/image/hwtz.png';
						this.listh.push(this.cuIconList[i])
					} else {
						this.cuIconList[i].isShow = 0
					}
				}
			} else {
				this.cuIconList = [];
				this.$api.msg('没有访问菜单的权限！');
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}

			// this.listx.push({
			// 	isShow: "1",
			// 	menuColor: "",
			// 	menuIcon: "/static/image/dy.png",
			// 	menuName: "序列号绑定",
			// })
			
			// this.listx.push({
			// 	isShow: "1",
			// 	menuColor: "",
			// 	menuIcon: "/static/image/dy.png",
			// 	menuName: "序列号解绑",
			// })
			
			// this.listx.push({
			// 	isShow: "1",
			// 	menuColor: "",
			// 	menuIcon: "/static/image/dy.png",
			// 	menuName: "拍照识别",
			// })



			/* var url = 'http://www.tianqiapi.com/api?version=history&appid=34167999&appsecret=0mj4wn8l&city=%E9%87%8D%E5%BA%86&year=2019&month=1'
			uni.request({
				url:url,
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
				},
				method: 'POST',
				success:function(data){
					console.log(data)
				}
				
			}) */

		},
		onLoad() {
			this.loadData();
		},
		methods: {
			confirm(){
				if(!this.num || this.num<=0){
					this.$api.msg('请输入需绑定子个数！');
				}else{
					let data = {}
					this.listArr.forEach(item=>{
						if(item.check){
							data = {...item}
						}
					})
					data.num = this.num
					uni.navigateTo({
						url: '/pages/codeBind/codeBind?data=' + JSON.stringify(data)
					})
					this.show = false
				}
			},
			xuanzhe(item){
				this.listArr.forEach(e=>{
					if(e.name == item.name){
						e.check = true
					}else{
						e.check = false
					}
				})
				this.$forceUpdate()
			},
			towh(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				}
				if (item.menuName == 'ASN到货') {
					uni.navigateTo({
						// url: '/pages/codeandwh/asntowh'
						url: '/pages/codeandwh/list'
					})
					return;
				}
				if (item.menuName == 'SKU查询') {
					uni.navigateTo({
						url: '/pages/SKUform/SKUform'
					})
					return;
				}
				if (item.menuName == '采购上架') {
					uni.navigateTo({
						url: '/pages/invSj/invSj'
					})
					return;
				}
				if (item.menuName == '拣货') {
					uni.navigateTo({
						url: '/pages/invXj/invXj'
					})
					return;
				}
				if (item.menuName == '国内仓拣货') {
					uni.navigateTo({
						url: '/pages/invXj/invXjDomestic'
					})
					return;
				}
				if (item.menuName == '其它拣货') {
					uni.navigateTo({
						url: '/pages/invXjOther/invXjOther'
					})
					return;
				}
				
				if (item.menuName == '打包复核') {
					uni.navigateTo({
						url: '/pages/dbfh/dbfh'
					})
					return;
				}
				
				
				if (item.menuName == '产成品上架') {
					uni.navigateTo({
						url: '/pages/invSj/dhinvSj'
					})
					return;
				}
				if (item.menuName == '货位存量查询') {
					uni.navigateTo({
						url: '/pages/shyInfo/shyInfo'
					})
					return;
				}

				if (item.menuName == '拣货回退') {
					uni.navigateTo({
						url: '/pages/invXj/invXjRe'
					})
					return;
				}
				if (item.menuName == '国内仓拣货回退') {
					uni.navigateTo({
						url: '/pages/invXj/invXjReDomestic'
					})
					return;
				}
				if (item.menuName == '其它拣货回退') {
					uni.navigateTo({
						url: '/pages/invXjOther/invXjReOther'
					})
					return;
				}
				if (item.menuName == '库房转移') {
					uni.navigateTo({
						url: '/pages/cwhJustinv/cwhJustUp'
					})
					return;
				}
				if (item.menuName == '上架记录(到货)') {
					uni.navigateTo({
						url: '/pages/orderSjjl/orderSjjl'
					})
					return;
				}
				if (item.menuName == '上架记录(生产)') {
					uni.navigateTo({
						url: '/pages/moSjjl/moSjjl'
					})
					return;
				}
				if (item.menuName == '货位调整') {
					uni.navigateTo({
						url: '/pages/posJustInv/posJustInv'
					})
					return;
				}
				if (item.menuName == '货位盘点') {
					uni.navigateTo({
						url: '/pages/posJustInv/posCheckInvList'
					})
					return;
				}
				if (item.menuName == '条码比对') {
					uni.navigateTo({
						url: '/pages/posJustInv/posCheckBarCode'
					})
					return;
				}
				if (item.menuName == '条码校对') {
					uni.navigateTo({
						url: '/pages/posJustInv/outAndScan'
					})
					return;
				}
				if (item.menuName == '核对包裹码') {
					uni.navigateTo({
						url: '/pages/packageInv/outAndScan'
					})
					return;
				}
				if (item.menuName == '快速质检') {
					uni.navigateTo({
						url: '/pages/checkAndWh/checkList'
					})
					return;
				}
				if (item.menuName == 'ASN入库') {
					uni.navigateTo({
						url: '/pages/checkAndWh/asnInbound'
					})
					return;
				}
				
				if (item.menuName == '序列号打印') {
					uni.navigateTo({
						url: '/pages/xuliehao/index'
					})
					return;
				}
				
				if (item.menuName == '序列号绑定') {
					uni.navigateTo({
						url: '/pages/codeBind/codeBind'
					})
					// this.show = true
					return;
				}
				if (item.menuName == '序列号解绑') {
					uni.navigateTo({
						url: '/pages/codeBind/codeUnbind'
					})
					// this.show = true
					return;
				}
				// if (item.menuName == '拍照识别') {
				// 	uni.navigateTo({
				// 		url: '/pages/xuliehao/index2'
				// 	})
				// 	// this.show = true
				// 	return;
				// }
				
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {

			},
			navToDetailUrl(char) {

			},
		},
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}

		text {
			font-size: 60upx;
		}
	}

	/* #endif */
	page {
		background: #ffffff;
	}
	
	
	.bg {
		 background:rgba(0,0,0,.4);
		 position:fixed;
		 left:0;
		 right:0;
		 top:0;
		 bottom:0;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}

</style>